<template>
  <!-- 添加药品字典页面 -->
  <div id="app">
    <!-- 设置顶部导航栏 -->
    <mt-header title="药 品 订 单">
      <mt-button icon="back" @click="goBack" slot="left">返回</mt-button>
      <mt-button slot="right" @click="goHome">
        <img
          src="../../assets/images/home.png"
          height="20"
          width="20"
          slot="icon"
          style="margin-top: 5px"
        />
      </mt-button>
    </mt-header>

    <!-- 表单区域 -->
    <van-form>
      <van-field
        v-model="drugMsg.name"
        name="药品名称"
        label="药品名称"
        placeholder="药品名称"
      />
      <van-field
        v-model="drugMsg.sellingPrice"
        name="价格"
        label="价格"
        placeholder="价格"
      />
      <van-field
        clearable
        readonly
        name="drugType"
        label="药品类型"
        :value="value2"
        placeholder="药品类型"
        @click="showPicker2 = true"
      />
      <van-popup v-model="showPicker2" position="bottom">
        <van-picker
          show-toolbar
          :columns="columns2"
          value-key="name"
          @confirm="onConfirm2"
          @cancel="showPicker2 = false"
        />
      </van-popup>
      <div style="margin: 16px">
        <van-button
          round
          block
          type="info"
          native-type="submit"
          @click="btnClick"
          >确认</van-button
        >
      </div>

      <!-- 药品类型选择器 -->
      <van-popup v-model="showPicker2" position="bottom">
        <van-picker
          show-toolbar
          :columns="columns2"
          value-key="name"
          @confirm="onConfirm2"
          @cancel="showPicker2 = false"
        />
      </van-popup>
    </van-form>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  name: "Record",

  data() {
    return {
      showPicker2: false,
      value2: "",
      drugNameId2: "",
      columns2: [],
      drugMsg: {
        name: "",
        sellingPrice: "",
        typeId: "",
      },
    };
  },

  mounted() {},

  created() {
    this.getDrugTypeList();
  },

  methods: {
    goBack() {
      this.$router.push({
        path: "./DrugManage",
      });
    },
    goHome() {
      this.$router.push({
        path: "./index",
      });
    },
    //提交按钮点击
    btnClick() {
      for (let i in this.drugMsg) {
        if (this.drugMsg[i].trim() == "") {
          Toast("请完整填写表单");
          return;
        }
      }
      this.$http.post("drug-dictionary", this.drugMsg).then((res) => {
        console.log(res);
        Toast("添加成功");
        setTimeout(() => {
          this.$router.push({
            path: "./DrugManage",
          });
        }, 1500);
      });
      console.log(this.drugMsg);
    },
    //获取药品类型字典
    getDrugTypeList() {
      this.$http
        .get("drug-type", {})
        .then((res) => {
          //console.log(res);
          this.columns2 = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //药品类型选择器展开
    onConfirm2(value) {
      this.value2 = value.name;
      this.drugMsg.typeId = value.id;
      this.showPicker2 = false;
    },
  },
};
</script>

<style lang="less" scoped>
</style>